<template>
    <div class="cutPriceDetail">
        <div class="allMain" v-if='!showAllComment' :class='{allMainActive:download}'>
            <div class="shopMess" id="shop" name='shop'>
              <swiper :show-dots="false" v-model='currentIndex'>
                <swiper-item class="black" v-for='(item,index) in shopMess.PHOTO_LIST' v-if='shopMess.PHOTO_LIST.length>0' :key='index'>
                  <div class="swiperItem">
                     <img :src="shopMess.IMG_URL+item.IMG" alt="" />
                  </div>
                </swiper-item>
              </swiper>
              <p class="index" v-if='shopMess.PHOTO_LIST'>{{(currentIndex+1)+"/"+shopMess.PHOTO_LIST.length}}</p>
              <div class="cutLine" :class='{cutLineNo:shopMess.STOCK==0}'>
                <div class="cutLineLeft">
                    <h1>最低砍购价</h1>
                    <span>￥<label>{{shopMess.END_PRICE.split('.')[0]}}</label><span v-if='shopMess.END_PRICE.indexOf(".")>-1'>.{{shopMess.END_PRICE.split('.')[1]}}</span></span>
                    <div class="priceNum">
                        <h2>库存{{shopMess.STOCK}}件</h2>
                        <p>参与人数:{{shopMess.SALE_NUM}}</p>
                    </div>
                </div>
                <div class="cutLineRight">
                    <p>距砍价结束</p>
                    <div class="times"><span v-if='downObj.day>0'>{{downObj.day}}天</span>{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</div>
                </div>
              </div>
              <div class="shopName">
                <h1>{{shopMess.SERV_SUBJECT}}</h1>
                <p>{{shopMess.REMARK}}</p>
                <div class="price">
                  原价:<s><label>￥{{shopMess.ORIGINAL_PRICE | filterMoney}}.{{shopMess.ORIGINAL_PRICE | filterMoney1}}</label></s>
                </div>
              </div>
              <div class="specifications" @click='selectRule' v-if='selectType!=""||watchSelect.str!=""'>
                <p v-if='watchSelect.str==""'>请选择{{selectType}}</p>
                <p v-if='watchSelect.str!=""'>已选择：{{watchSelect.str}}</p><span></span>
              </div>
            </div>
            <div class="groupdetails">
                <div class="detailHeader" @click='playDetail'>
                    <h1>砍价购玩法规则</h1>
                    <div class="headerR">
                        <span></span>
                        <label></label>
                    </div>
                </div>
                <div class="detailF">
                    <img src="../../assets/image/cutPrice/cutpStep.jpg" alt="" />
                </div>
            </div>
            <div class="cutList">
                <div class="listHeader" @click='checkAllUser'>
                    <h1>成就榜</h1>
                    <div class="headerR">
                        <span></span>
                        <label></label>
                    </div>
                </div>
                <achievementList :userList='userList' type='1' v-if='userList.length>0'></achievementList>
                <div class="noGroupUser" v-if='userList.length==0'>
                  <img src="../../assets/image/cutPrice/noAchievement.png" alt="" />
                  <p>暂无成就，等你上榜~</p>
                </div>
            </div>
            <div class="cutType" v-if='shopMess.USER_STATUS==1'>
                <div class="listHeader">
                    <h1>由你发起的砍价</h1>
                    <div class="headerR">
                        <span></span>
                        <label></label>
                    </div>
                </div>
                <div class="cutShopMess" @click="cutDetail(shopMess.ORDER_ID)">
                    <div class="shopPrice">
                        <div class="priceLine">
                            <img src="../../assets/image/cutPrice/start.png" alt="" />
                            <p>
                                <!-- 砍掉的价格乘以1块钱对应的长度 -->
                                <span class="payPrice" :style='{width: 5.6/(shopMess.PRICE-shopMess.END_PRICE)*(shopMess.PRICE-shopMess.NOW_PRICE)+"rem"}'></span>
                            </p>
                            <img src="../../assets/image/cutPrice/end.png" alt="" />
                        </div>
                        <div class="cutPriceProcess">
                            <span>原价:￥{{shopMess.PRICE}}</span>
                            <span>最低砍购价:￥{{shopMess.END_PRICE}}</span>
                        </div>
                        <div class="cutProcess" :style='{left:5.6/(shopMess.PRICE-shopMess.END_PRICE)*(shopMess.PRICE-shopMess.NOW_PRICE)-0.25+"rem"}'>
                            <p>已砍至:￥{{shopMess.NOW_PRICE}}</p>
                            <img src="../../assets/image/cutPrice/move2.png" alt="" />
                        </div>
                    </div>
                    <div class="cutShopNum">
                        <span class="cutTypes">砍价中</span>
                        <span class="shopNumber">可购库存：{{shopMess.STOCK}}件</span>
                    </div>
                </div>
            </div>
            <!-- 评论 -->
            <div class="comments">
              <h1>全部评论({{shopMess.COMMENTS}})</h1>
              <div class="commentsItem" v-for='(item,index) in commentMess' :key="index">
               <div class="comHead">
                 <div class="star">
                  <span v-for='i in Math.ceil(item.SCORE)' :key="i"></span>
               </div>
               <div class="userName">{{item.USER_NAME | fiterPhone}}</div>
              </div>
              <div class="comMain">
                  <div class="conTitle">
                    {{item.CONTENT}}
                  </div>
                  <div class="comImg">
                    <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
                    <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
                    <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
                    <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
                  </div>
                  <div class="replayCom" v-if='item.REPLY_CONTENT'>
                    <span></span>
                    {{item.REPLY_CONTENT}}
                  </div>
                </div>
                <div class="comFooter">
                  <p>{{item.CREATE_TIME | filterTimes}}</p>
                </div>
              </div>
              <div v-if='commentMess.length==0' class="noComment">
                <img src="../../assets/image/carProduct/noComment.png" alt="" />
                <p>暂无评论</p>
                <p>购买后快来发表评论吧</p>
              </div>
              <div class="allComments" @click='goAllComment' v-if='commentMess.length>=3'>
                查看更多评论
              </div>
            </div>
          <!-- 我的提问 -->
          <div class="question" >
            <p class="title">问买家 <span class="count" v-if="hasQuestion" @click="goAllQuestion">{{questionCount}}个问答<span></span></span></p>

            <ul v-if="hasQuestion" >
              <li  v-for="item in questionList" @click="goQuestionDetail(item.QUESTION_ID)">
                <p class="questionContent"><img src="../../assets/image/question/question.png" alt=""><span>{{item.MEESAGE}}</span></p>
                <p class="answerCount">{{item.COUNT}}个回答</p>
              </li>
            </ul>

            <div  v-if="hasQuestion">
              <div class="showAllQuestion" @click="goAllQuestion">查看全部问答</div>
            </div>
            <div class="noQuestion" v-if="!hasQuestion" @click="goQuestion">
              <p class="questionContent"><img src="../../assets/image/question/question.png" alt="">商品好不好,问问买过的人就知道了呗 ></p>
            </div>
          </div>
            <!-- 商品详情 -->
            <div class="detailMess" id="detail" name='detail'>
              <p>向上拖动，查看更多图文详情</p>
              <img src="../../assets/image/carProduct/up.png" alt="" class="up" />
              <div class="detailHtml" v-html='shopMess.SERV_DESC'></div>
            </div>
    </div>
    <div class="footer" v-if='!showAllComment'>
      <!-- @click="toServerChat"-->
        <a :href="'tel:'+shopMess.SERV_PHONE" >
          <img src="../../assets/image/carProduct/tel.png" alt="" />
        </a>
        <div class="shopCart" @click='goShopCart'>
          <img src="../../assets/image/carProduct/shopCart.png" alt="" />
          <span :class='{circle1:shopNum<10,circle2:shopNum<100&&shopNum>=10,circle3:shopNum<1000&&shopNum>=100}' v-if='shopNum>0'>{{shopNum}}</span>
        </div>
        <div class="type1" v-if='shopMess.USER_STATUS==0&&shopMess.STOCK!=0'>
            <div class="addShop" @click='goPayNn'>
              <h1>立即购买</h1>
            </div>
            <div class="toPay" @click='addCutPrice'>
              <h1>发起砍价</h1>
            </div>
        </div>
        <div class="type2" v-if='shopMess.USER_STATUS==1&&shopMess.STOCK!=0'>
            <div class="addShop cutPay" @click='goPayG'>
              <p>￥<span>{{Number(shopMess.NOW_PRICE) |filterMoney}}</span>.{{Number(shopMess.NOW_PRICE) |filterMoney1}}</p>
              <h1>立即购买</h1>
            </div>
            <div class="toPay" @click='cutDetail(shopMess.ORDER_ID)'>
              <h1>砍价详情</h1>
            </div>
        </div>
        <div class="type3" v-if='shopMess.STOCK==0'>
            <div class="toPay cutEnd">
              <h1>已结束</h1>
            </div>
        </div>
    </div>
    <popup v-model="showPop">
      <div class="popRule">
        <div class="popHead">
          <div class="popHLeft" v-if='shopMess.PHOTO_LIST.length>0'>
            <img :src="shopMess.IMG_URL+shopMess.PHOTO_LIST[0].IMG" alt=""/>
          </div>
          <div class="popHCenter">
            <h1 v-if="watchSelect.prices">￥{{Number(watchSelect.prices)}}</h1>
            <h1 v-if="!watchSelect.prices">￥{{Number(shopMess.ORIGINAL_PRICE)}}</h1>
            <p v-if='watchSelect.str!=""&&shopMess.ATTR_LIST.length!=0'>已选择：{{watchSelect.str}}</p>
            <p v-if='watchSelect.str==""&&shopMess.ATTR_LIST.length!=0'>请选择商品的属性</p>
            <p v-if="shopMess.ATTR_LIST.length==0">请选择数量:{{number}}</p>
          </div>
          <div class="popHRight">
            <img src="../../assets/image/carProduct/close.png" @click='closePop'/>
          </div>
        </div>
        <div class="popMain">
          <div class="rule" v-for='(items,index) in shopMess.ATTR_LIST' :key="index" v-if="shopMess.ATTR_LIST.length!=0">
            <p>{{items.TYPE}}</p>
            <div class="ruleDetail">
              <span v-for='(itemss,indexs) in items.ATTRIBURE' :class='{activeSpan:itemss.IS_SELECT==1}' @click='selectClass(index,indexs)' :key="indexs">{{itemss.SERV_NAME}}</span>
            </div>
          </div>
          <div class="number" v-if='payClass==0'>
            <group>
              <x-number title="数量" :step="1" :min='1' v-model='number'></x-number>
            </group>
          </div>
        </div>
        <div class="popFooter" @click='determine'>
          {{popText}}
        </div>
      </div>
    </popup>
    <popup v-model="showAllUser" position='right' width='100%'>
      <div class="allCutUser" v-if='showAllUser'>
        <x-header title="成就榜" :left-options="{backText:'',preventGoBack:true}" class='whiteHeader' @click.native='closeAllUser'>
        </x-header>
        <div class="allUserList">
            <scroller :on-infinite="infinites" ref='myScroller'>
              <achievementList :userList='userList' type='2'></achievementList>
              <div class="noMoreDate"  v-if='noData'>
                <div class="noMoreLine"></div>
                <span>没有更多了哟</span>
              </div>
            </scroller>
            <div class="noAchievement" v-if='userList.length==0'>
                <img src="../../assets/image/cutPrice/noAchievement.png" alt="" />
                <p>暂无成就，等你上榜~</p>
            </div>
        </div>
      </div>
    </popup>
    <toast v-model="showToast" type='text'>{{toastText}}</toast>
    </div>
</template>
<script>
import { XHeader,Swiper,SwiperItem,XNumber,Group,Popup,Toast} from 'vux';
import { setCookie, getCookie,isWeiXin,wXAuthJump,sendWXCodeOrOpenid,GetQueryString,clearCookie } from '../../util/commonUtils';
import achievementList from './achievementList';  //团购组件
export default {
    name: "cutPriceDetail",
    // 数据
    data() {

        return {
            userId: '',
            currentIndex:0,
            shopNum:0,  //购物车数量
            showPop:false,  //商品属性弹窗是否显示
            number:1,   //购买商品的数量
            popText:'去砍价',
            showToast:false,//提示框显示隐藏
            toastText:'',
            downObj:{
                day:0,
                H:0,
                M:0,
                S:0
            },
            payClass:1,  //购买类型  0代表单独购买  2代表发起砍价后购买  1代表发起砍价
            PID:0,   //如果自己开团那么团id就为0  如果是去凑团那么就该团团长id
            showAllUser:false, //是否显示全部团购用户
            page:1,
            userList:[],  //该商品已经开的团
            closeTime:'',
            clickKey:false,  //点击开关
            noData:false,
            orderId: '', // 商品的Id
          hasQuestion:true, //是否有问答
          questionList:'', //问答列表
          questionCount:0,
          shopId:'',
        }
    },
    props:['shopMess','showAllComment','download','commentMess','selectType','shopClass'],

    // 计算属性
    computed: {
        watchSelect(){
          let arr=this.shopMess.ATTR_LIST;
          let str='';
          let sum=0;
          let prices=0;
          let obj={};//加入购物车的数据
          if(this.shopMess.ATTR_LIST){
            obj.PARAMS=[];
            let objs={};
            objs.SHOP_NAME=this.shopMess.SHOP_NAME;
            objs.SERV_ID=this.shopMess.SERV_ID;
            objs.QUANTITY=this.number;
            objs.COMP_ID=this.shopMess.COMP_ID;
            objs.ATTR_LIST=[];
            for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
              for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
                let objss={};
                if(this.shopMess.ORDER_ATTR_LIST.length>0){
                  for(let l=0;l<this.shopMess.ORDER_ATTR_LIST.length;l++){
                    if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_ID==this.shopMess.ORDER_ATTR_LIST[l].ATTRIBURE){
                        objss.ATTRIBURE=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_ID;
                        objss.TYPE=this.shopMess.ATTR_LIST[i].TYPE;
                        objs.ATTR_LIST.push(objss);
                        str+='['+this.shopMess.ATTR_LIST[i].TYPE+']';
                        str+=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_NAME+' ';
                        sum+=Number(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].PRICE);
                    }
                  }
                }else{
                  if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
                    objss.ATTRIBURE=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_ID;
                    objss.TYPE=this.shopMess.ATTR_LIST[i].TYPE;
                    objs.ATTR_LIST.push(objss);
                    str+='['+this.shopMess.ATTR_LIST[i].TYPE+']';
                    str+=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_NAME+' ';
                    sum+=Number(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].PRICE);
                  }
                }
              }
            }
            if(this.payClass==0){//单独购买
              objs.price=Number(this.shopMess.PRICE)+sum;
              prices=Number(this.shopMess.PRICE)+sum;
            }else{
              objs.price=Number(this.shopMess.NOW_PRICE)+sum;
              prices=Number(this.shopMess.NOW_PRICE)+sum;
            }
            obj.PARAMS.push(objs);
          }
          return {
            str:str,
            sum:sum,
            prices:prices,
            addObj:obj
          }
        },
      //判断是否选择了所有的规格和属性
      allSelect(){
        let arr=this.shopMess.ATTR_LIST;
        let flag=false;
        if(this.shopMess.ATTR_LIST){
          if(this.shopMess.ATTR_LIST.length==0){
            return true;
          }
          for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
            for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
              if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
                flag=true;
              }
            }
            if(!flag){
              break;
            }
          }
          if(!flag){
            return false;
          }else{
            return true;
          }
        }
      },
      // 判断价格
      isnotENDPrice(){
        if(!this.shopMess.END_PRICE){
          return '0';
        }else{
          return this.showMess.END_PRICE
        }
      }
    },
    // 创建（实例创建完成）
    created() {
        this.userId = getCookie('loginkey');
      this.shopId=this.$route.params.id;//商品id
        if(this.userId){
            this.getShopCarNum();
        }
        //轮询订单的结束时间
        this.closeTime=setInterval(()=>{
          this.checkShop();
        },500);
        this.getUser();
        if(sessionStorage.getItem('cutPrice')&&!this.clickKey){
          this.clickKey=true;
          if(this.payClass==1){
            this.addCutPrice();
          }else if(this.payClass==2){
            this.goPayG();
          }
        }
        if(this.number!=1){
          this.number=1
        }
      this.getQuestion(); //问答
    },
    // el被创建，并挂载到实例上
    mounted() {

    },
    // 方法（实例中的方法）-----------
    methods: {
        //砍价详情
        cutDetail(id){
          this.$router.push('/cutPriceDetail/'+id);
        },
        playDetail(){
          location.href='http://carnt.carnettong.com:8088/CARNT/GroupPlayDetail/cutPriceRule.html';
        },
        goAllComment(){
            this.$emit('show-allcomment',true);
        },
        //选择规格
        selectRule(){

          if(this.shopMess.USER_STATUS==0){
            this.payClass=1;
            this.popText='发起砍价';
            this.showPop=true;
          }

        },
        //查看所有拼团用户
        checkAllUser(){
          this.showAllUser=true;
        },
        //关闭所有拼团用户
        closeAllUser(){
          this.showAllUser=false;
        },
        // index 是ATTR_LIST索引  indexs 是ATTRIBURE的索引
        selectClass(index,indexs){
            for(let j=0;j<this.shopMess.ATTR_LIST[index].ATTRIBURE.length;j++){
              this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[j],'IS_SELECT',0);
            }
            this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[indexs],'IS_SELECT',1);
        },
        //获取购物车数量
        getShopCarNum(){
          this.$fetchPost('/ShoppingCartWeb/getShopCartCount.action',{USER_ID:this.userId}).then(res=>{
              if(res.STATUS_CODE==1){
                this.shopNum=res.SHOPPING_CART
              }
          },err=>{})
        },
        //确定购买
        determine(){
          // 判断是否登录
            let that=this;
            if(!getCookie('loginkey')){//判断是否登录
              this.$vux.confirm.show({
                title:'提示',
                content:'请先登录',
                onConfirm () {
                  that.$router.push('/login');
                }
              })
            }
          if(this.payClass==0){
            this.goPayN();
          }else if(this.payClass==1){
            this.addCutPrice();
          }else if(this.payClass==2){
            this.goPayG();
          }
        },
        //去购物车
        goShopCart(){
          let that=this;
          if(!getCookie('loginkey')){//判断是否登录
            this.$vux.confirm.show({
              title:'提示',
              content:'请先登录',
              onConfirm () {
                that.$router.push('/login');
              }
            })
          }else{
            this.$router.push('/shoppingCart');
          }
        },
        //检查单独购买和砍价是否选择了属性
        checkAdd(){
          let that=this;
          if(!getCookie('loginkey')){//判断是否登录
            this.$vux.confirm.show({
              title:'提示',
              content:'请先登录',
              onConfirm () {
                that.$router.push('/login');
              }
            })
            return false;
          }
          if(this.shopMess.ATTR_LIST.length==0){//无属性列表
            return true;
          }
          if(this.allSelect){//判断是否选择了所有的属性和规格
            this.showPop=false;
            return true;
          }else{
            if(this.showPop){
              this.toastText='请选择商品属性';
              this.showToast=true;
            }else{
              this.showPop=true;
            }
            return false;
          }
        },
        //发起砍价后购买
        goPayG(){
          let code = GetQueryString('code');
          let unionid=getCookie('_unionidpo_');
          if(isWeiXin()){
              let that=this;
              // 1.是微信环境下
              // 不存在openid 检查是否有code参数
              if ( code || unionid) {
                sendWXCodeOrOpenid.call(that).then(function (data) {
                  // 储存code拉回的openid
                  console.log(data)
                  if ( data.STATUS_CODE == 1) {
                    //获取用户微信信息
                    setCookie('_unionidpo_', data.AUTH_INFO.unionid);//用户的unionid
                    setCookie("headerImg",data.AUTH_INFO.headimgurl);
                    setCookie("userN",data.AUTH_INFO.nickname);
                    sessionStorage.removeItem('cutPrice');
                    that.clickKey=false;
                    if(data.IS_BINDING==0){
                      that.$router.push('/modifyGroup');
                    }else if(data.USER_ID){
                      setCookie("userName",data.MOBILE);
                      setCookie("loginkey",data.USER_ID);
                      setCookie('CAR_ID',data.CAR_ID);
                      setCookie('INV_CODE',data.INV_CODE);
                      setCookie('INV_URL',data.INV_URL);
                      that.userId=data.USER_ID;
                      that.toOnlyPay();
                    }
                  }else if(data.STATUS_CODE == 2){
                    sessionStorage.setItem('cutPrice',1);
                    clearCookie('_unionidpo_');
                    let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID;
                    wXAuthJump.call(that,urls);
                  }
                })
              }
              // 不存在code也无openid
              else {
                sessionStorage.setItem('cutPrice',1);//代表用户点击了开团按钮
                // 跳转微信授权地址 （之后再跳回页面，流程重头来过）
                let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID;
                wXAuthJump.call(that,urls);
              }
          }else{
            this.toOnlyPay();
          }
        },
        goPayGs(){
          this.payClass=2;
          this.popText='立即购买';
          // 重新请求 支付数据
          // let flag=this.checkAdd();
          // if(!flag){
          //   this.showPop=true;
          //   return; // 谭选择过的商品属性
          // }//封装支付数据
          let settleMess=this.encapsulateData();
          if(this.shopMess.ORDER_ID){
            settleMess.ORDER_ID=this.shopMess.ORDER_ID;//砍价支付需要的orderId
          }
          sessionStorage.removeItem('orderMess');
          sessionStorage.removeItem('distribuVoucher');
          localStorage.removeItem('from');
          sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
          //this.$router.push('/shopPay');
          location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
        },
        //发起砍价
        addCutPrice(){
          let code = GetQueryString('code');
          let unionid=getCookie('_unionidpo_');
          if(isWeiXin()){
              let that=this;
              // 1.是微信环境下
              // 不存在openid 检查是否有code参数
              if ( code || unionid) {
                sendWXCodeOrOpenid.call(that).then(function (data) {
                  // 储存code拉回的openid
                  console.log(data)
                  if ( data.STATUS_CODE == 1) {
                    //获取用户微信信息
                    setCookie('_unionidpo_', data.AUTH_INFO.unionid);//用户的unionid
                    setCookie("headerImg",data.AUTH_INFO.headimgurl);
                    setCookie("userN",data.AUTH_INFO.nickname);
                    sessionStorage.removeItem('cutPrice');
                    that.clickKey=false;
                    if(data.IS_BINDING==0){
                      that.$router.push('/modifyGroup');
                    }else if(data.USER_ID){
                      setCookie("userName",data.MOBILE);
                      setCookie("loginkey",data.USER_ID);
                      setCookie('CAR_ID',data.CAR_ID);
                      setCookie('INV_CODE',data.INV_CODE);
                      setCookie('INV_URL',data.INV_URL);
                      that.userId=data.USER_ID;
                      that.openCut();
                    }
                  }else if(data.STATUS_CODE == 2){
                    sessionStorage.setItem('cutPrice',1);
                    clearCookie('_unionidpo_');
                    let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID;
                    wXAuthJump.call(that,urls);
                  }
                })
              }
              // 不存在code也无openid
              else {
                sessionStorage.setItem('cutPrice',1);//代表用户点击了开团按钮
                // 跳转微信授权地址 （之后再跳回页面，流程重头来过）
                let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID;
                wXAuthJump.call(that,urls);
              }
          }else{
            this.openCut();
          }
        },
        //开启砍价
        openCut(){
          this.payClass=1;
          this.popText='发起砍价';
          let flag=this.checkAdd();
          if(!flag){
            this.showPop=true;
            return;
          }//封装支付数据
          let settleMess=this.encapsulateData();
          sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
          this.$fetchPost('/Bargain/createBargainOrder.action',{jsonParams:JSON.stringify(settleMess)}).then(res=>{
              if(res.STATUS_CODE==1){
                this.$router.push('/cutPriceDetail/'+res.ORDER_ID);
              }
          },err=>{})
        },
        //点击单独购买
        goPayNn(){
          let that=this;
          if(!getCookie('loginkey')){//判断是否登录
            this.$vux.confirm.show({
              title:'提示',
              content:'请先登录',
              onConfirm () {
                that.$router.push('/login');
              }
            })
            return false;
          }
          this.payClass = 0;
          this.popText='单独购买';
          this.showPop = true;
        },
        //购买商品,单独购买
        goPayN(){
          this.payClass=0;
          this.popText='单独购买';
          let flag=this.checkAdd();
          if(!flag){
            this.showPop=true;
            return;
          }
          // 选择的规格 选择的数量
          // console.log('ss')
          let settleMess=this.encapsulateData();
          sessionStorage.removeItem('orderMess');
          sessionStorage.removeItem('distribuVoucher');
          localStorage.removeItem('from');
          sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
          // this.$router.push('/shopPay');
          location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
        },
        // 封装单独购买的的数据
        toOnlyPay() { // 获取砍价的支付信息 TYPE传1
          this.payClass=2;
          this.popText='立即购买';
          this.orderId= this.shopMess.ORDER_ID
          this.$fetchPost("/ServOrderWeb/confirmOrderInfo.action", {
            ORDER_ID:this.orderId,
            TYPE:1
          }).then(
            res => {
              // console.log(res)
              if(res.STATUS_CODE ==1) {
                this.orderList = res.ORDER_LIST[0]
                this.getOnlyPay()
              }
            },
            err => console.log(err)
          );
        },
        // 封装支付数据
        getOnlyPay(){
          if(this.orderList != ""){
            let obj = {};
            obj.COMP_ID = this.orderList.COMP_ID;
            obj.SHOP_NAME = this.orderList.SHOP_NAME;
            obj.SERV_PARAMS= [];
            let objs= {};
            objs.SERV_ID = this.orderList.SERV_PARAMS[0].SERV_ID;
            objs.QUANTITY = this.orderList.SERV_PARAMS[0].QUANTITY;
            objs.SERV_FIRST_CLASS = this.orderList.SERV_PARAMS[0].SERV_FIRST_CLASS;
            objs.SERV_SECON_CLASS = this.orderList.SERV_PARAMS[0].SERV_SECON_CLASS;
            objs.SUPP_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_CASH_VOL;
            objs.SUPP_DIS_VOL = this.orderList.SERV_PARAMS[0].SUPP_DIS_VOL;
            objs.SUPP_NOR_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_NOR_CASH_VOL;
            objs.SERV_SUBJECT = this.orderList.SERV_PARAMS[0].SERV_SUBJECT;
            objs.PRICE = Number(this.orderList.PRICE);
            objs.MARK =this.orderList.SERV_PARAMS[0].MARK;
            objs.ATTR_LIST = [];
            if(this.orderList.SERV_PARAMS[0].ATTR_LIST != []){
              for(let i=0;i<this.orderList.SERV_PARAMS[0].ATTR_LIST.length;i++){
              let objss={};
              objss.ATTRIBURE=String(this.orderList.SERV_PARAMS[0].ATTR_LIST[i].ATTRIBURE);
              objss.TYPE=this.orderList.SERV_PARAMS[0].ATTR_LIST[i].TYPE;
              objs.ATTR_LIST.push(objss);
              }
            }
            obj.SERV_PARAMS.push(objs);
            let cutGoodObj = {};
            cutGoodObj.USER_ID = this.userId;
            if(this.orderId){
                cutGoodObj.ORDER_ID=this.orderId;//支付需要的orderId
            }
            cutGoodObj.ORDER_LIST = [];
            cutGoodObj.ORDER_LIST.push(obj);
            sessionStorage.removeItem('orderMess');
            sessionStorage.removeItem('distribuVoucher');
            localStorage.removeItem('from');
            sessionStorage.setItem('shopMess',JSON.stringify(cutGoodObj));//商品支付的数据
            // this.$router.push('/shopPay');
            location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
          }
        },
        encapsulateData(){
          let settleMess={};
          settleMess.USER_ID=this.userId;
          settleMess.ORDER_LIST=[];
          let objs={};
          objs.COMP_ID=this.watchSelect.addObj.PARAMS[0].COMP_ID;
          objs.SHOP_NAME=this.watchSelect.addObj.PARAMS[0].SHOP_NAME;
          objs.SERV_PARAMS=[];
          let objss={};
          objss.SERV_ID=this.watchSelect.addObj.PARAMS[0].SERV_ID;
          if(this.payClass==0){
            objss.QUANTITY=this.watchSelect.addObj.PARAMS[0].QUANTITY;
          }else{
            objss.QUANTITY=1;
          }
          objss.SERV_FIRST_CLASS=this.shopMess.SERV_FIRST_CLASS;
          objss.SERV_SECON_CLASS=this.shopMess.SERV_SECON_CLASS;
          objss.SUPP_CASH_VOL=this.shopMess.SUPP_CASH_VOL;
          objss.SUPP_DIS_VOL=this.shopMess.SUPP_DIS_VOL;
          objss.SUPP_NOR_CASH_VOL=this.shopMess.SUPP_NOR_CASH_VOL;
          objss.SERV_SUBJECT=this.shopMess.SERV_SUBJECT;//商品名称
          objss.PRICE=Number(this.watchSelect.prices);//商品价格
          objss.MARK=1;
          objss.ATTR_LIST=[];
          for(let i=0;i<this.watchSelect.addObj.PARAMS[0].ATTR_LIST.length;i++){
            let objAtr={};
            objAtr.ATTRIBURE=String(this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].ATTRIBURE);
            objAtr.TYPE=this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].TYPE;
            objss.ATTR_LIST.push(objAtr);
          }
          objs.SERV_PARAMS.push(objss);
          settleMess.ORDER_LIST.push(objs);
          return settleMess;
        },
        //轮询团购商品计算团购结束时间
        checkShop(){
            var times=new Date().getTime();
            let day=0;
            let H=0;
            let M=0;
            let S=0;
            if(times>=this.shopMess.END_DATE){
              this.$vux.alert.show({
                  title: '',
                  content: '活动已经结束了'
              })
              clearInterval(this.closeTime);
            }else{
              day=parseInt((this.shopMess.END_DATE-times)/(24*60*60*1000));
              H=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000)/(60*60*1000));
              M=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000-H*60*60*1000)/(60*1000));
              S=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000-H*60*60*1000-M*60*1000)/(1000));
              H=this.filterNum(H);
              M=this.filterNum(M);
              S=this.filterNum(S);
            }
            this.downObj={
              day:day,
              H:H,
              M:M,
              S:S
            }
        },
        filterNum(num){
          return num>=10?num:'0'+num
        },
        closePop(){
            this.showPop=false;
        },
        getUser(){
          this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
              PAGE_NO:this.page,
              PAGE_SIZE:3,
              SERVDETAIL_ID:this.shopMess.SERV_ID
            }).then(res=>{
              if(res.STATUS_CODE==1){
                this.userList=res.TOP_ORDER_LIST
              }
            },err=>{
              console.log(err);
            })
        },
        //获取所有砍价成就榜列表（第一次）,切换到全屏显示砍价成就榜
        getUserList(){
          this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
              PAGE_NO:this.page,
              PAGE_SIZE:10,
              SERVDETAIL_ID:this.shopMess.SERV_ID
            }).then(res=>{
              if(res.STATUS_CODE==1){
                this.userList=res.TOP_ORDER_LIST;
                if(res.TOP_ORDER_LIST.length<10){
                  this.$refs.myScroller.finishInfinite(2);
                  if(this.userList.length>0){
                     this.noData=true;
                  }
                }else{
                  this.page++;
                  this.$refs.myScroller.finishInfinite();
                }
              }
            },err=>{
              console.log(err);
            })
        },
        //上拉刷新
        getMordeUserList(){
          this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
            PAGE_NO:this.page,
            PAGE_SIZE:10,
            SERVDETAIL_ID:this.shopMess.SERV_ID
          }).then(res=>{
              if(res.STATUS_CODE==1){
                this.userList=this.userList.concat(res.TOP_ORDER_LIST);
                if(res.TOP_ORDER_LIST.length<10){
                  this.$refs.myScroller.finishInfinite(2);
                }else{
                  this.page++;
                  this.$refs.myScroller.finishInfinite();
                }
              }
            },err=>{
              console.log(err);
            })
        },
        infinites(){
          if(this.page==1){
           this.getUserList();
          }else{
           this.getMordeUserList();
          }
        },
        //点击图片全屏显示
        showImg (e) {
            var commentImgBg = document.createElement('div');
            commentImgBg.style.cssText = 'position: fixed;\
                                          top: 0;\
                                          left: 0;\
                                          right: 0;\
                                          bottom: 0;\
                                          z-index:999;\
                                          background-color: #000;';
            var commentImg = document.createElement('img');
            commentImg.style.cssText = 'width: 100%;\
                                        position: fixed;\
                                        left: 50%;\
                                        top: 50%;\
                                        -webkit-transform: translate(-50%,-50%);\
                                        transform: translate(-50%,-50%);'
            commentImg.src = e.target.src;
            commentImgBg.appendChild(commentImg);

            commentImgBg.onclick = function () {
              document.body.removeChild(commentImgBg)
            }
            document.body.appendChild(commentImgBg)
        },
         // 客服帮助
        toServerChat(){
          this.$router.push('/customerService')
        },
      //我的问答
      goQuestion(){
        console.log(this.shopMess.SERV_SUBJECT)
        sessionStorage.setItem('aname',this.shopMess.SERV_SUBJECT);
        sessionStorage.setItem('aimg',this.shopMess.SHARE_IMG);
        this.$router.push('/doQuestion/'+this.shopId)
      },
      goQuestionDetail(id){
        this.$router.push('/questionDetail/'+id)
      },
      goAllQuestion(){
        this.$router.push('/allQuestion/'+this.shopId)
      },
      getQuestion(){
        let obj ={};
        obj.SERV_ID =this.shopId;
        obj.PAGE_NO =1;
        obj.PAGE_SIZE =3;
        this.$fetchPost('serviceDetailQA/ getServiceDetailQuestionList',obj).then(res=>{
          // console.log(res)
          this.questionCount=res.QUESTION_COUNT
          if(res.QUESTION_COUNT==0){
            this.hasQuestion=false;
          }else{
            this.hasQuestion=true
          }
          this.questionList=res.QUESTION_LIST
        },err=>{
          console.log(err)
        })
      },
    },
    // 子组件
    components: {
        XHeader,Swiper,SwiperItem,achievementList,XNumber,Group,Popup,Toast
    }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.question{
  border-bottom:0.2rem solid #f5f5f5;
  .title{
    font-family: PingFangSC-Regular;
    font-size:0.27rem;
    color: #333333;
    text-align:left;
    padding:0.3rem 0.2rem 0.3rem 0.32rem;
    .count{
      float: right;
      color: #888888;
      font-size:0.25rem;
      span{
        width: 0.2rem;
        height: 0.2rem;
        vertical-align: middle;
        display: inline-block;
        margin-top: -0.03rem;
        color: #888888;
        transform:rotate(45deg);
        border: 0.02rem solid #888888;
        border-width:0.02rem 0.02rem 0 0;

      }
    }
  }
  ul{
    li{
      text-align:left;
      padding-left:0.37rem;
      padding-bottom:0.3rem;
      .questionContent{
        font-size:0.23rem;
        color:#666666;
        margin-bottom:0.09rem;
        padding-right:0.3rem;
        img{
          width: 0.33rem;
          float: left;
          vertical-align: middle;
          margin-right:0.07rem;
          margin-right: 0.1rem;
        }
        span{
          display: block;
        }
      }
      .answerCount{
        font-size: 0.2rem;
        padding-left: 0.43rem;
        color: #999999;
      }
    }
  }
  .noQuestion{

    font-size:0.26rem;
    color:#888888;
    padding-bottom:0.52rem;
    img{
      width: 0.33rem;
      vertical-align: middle;
      margin-right: 0.09rem;
    }
  }
  .showAllQuestion{
    height: 0.6rem;
    width: 2.8rem;
    border-radius:0.3rem;
    font-size:0.25rem;
    line-height: 0.6rem;
    color:#666666;
    border:1px solid #999999;
    margin: 0 auto 0.3rem;
  }
}
.cutPriceDetail {
  .noAchievement{
        position: absolute;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
        img{
            display: block;
            width: 1.77rem;
            height: 1.83rem;
            margin: 0 auto;
        }
        p{
            color: #888;
            font-size: 0.3rem;
            margin-top: 0.2rem;
        }
    }
  .noMoreDate{
        position: relative;
        height: 0.6rem;
        margin-bottom:-1rem;
        z-index: 999;
        padding-top: 0.5rem;
        .noMoreLine{
          width: 2.9rem;
          margin: 0 auto;
          height: 1px;
          background: #ccc;
          transform:scaleY(0.5);
        }
        span{
          font-size: 0.22rem;
          color: #666;
          padding: 0 0.15rem;
          position: absolute;
          background: #fff;
          transform:translate(-50%,-55%);
        }
    }
  .allCutUser{
    height: 100%;
    overflow: scroll;
    background: #fff;
    min-height: 100%;
    .allUserList{
      padding: 0 0.2rem;
      background: #fff;
    }
  }
  .allMain{
    padding-top: 0.9rem;
    background: #fff;
    .cutList{
       border-bottom: 0.18rem solid #efeff4;
      .noGroupUser{
        padding: 0.3rem 0;
        img{
          width: 0.86rem;
          height: 0.86rem;
          display: block;
          margin: 0 auto;
        }
        p{
          font-size: 0.26rem;
          color: #999;
          padding: 0.3rem 0 0;
        }
      }
    }
    .listHeader{
        display: flex;
        justify-content:space-between;
        padding: 0 0.3rem 0 0.2rem;
        height: 0.8rem;
        align-items:center;
        h1{
           height: 0.8rem;
           font-size: 0.26rem;
           line-height: 0.8rem;
           text-align: left;
           color: #222;
        }
        .borderBFu(#ddd);
        .headerR{
            display: flex;
            align-items:center;
            span{
                font-size: 0.24rem;
                color: #999;
                padding-right: 0.15rem;
            }
            label{
                width: 0.2rem;
                height: 0.2rem;
                transform:rotate(45deg);
                border: 0.02rem solid #414141;
                border-width:0.02rem 0.02rem 0 0;
            }
        }
    }
    .cutType{
        border-bottom: 0.18rem solid #efeff4;
        .cutShopMess{
            padding:0 0.3rem;
            .shopPrice{
                position: relative;
                padding: 1.1rem 0 0.5rem;
                .priceLine{
                    display: flex;
                    align-items:center;
                    justify-content:center;
                    padding: 0 0.15rem;
                    img{
                        width: 0.4rem;
                        height: 0.4rem;
                        display: block;
                    }
                    p{
                        width: 5.6rem;
                        background: #ddd;
                        height: 2px;
                        margin: 0 0.08rem;
                        border-radius: 0.1rem;
                        .payPrice{
                            display: block;
                            width: 2rem;
                            height: 2px;
                            background: #FC6274;
                        }
                    }
                }
                .cutProcess{
                    width: 1.8rem;
                    position: absolute;
                    top: 0.3rem;
                    left: -0.25rem;
                    img{
                        width: 0.36rem;
                        height: 0.48rem;
                        display: block;
                        margin: 0.1rem auto 0rem;
                    }
                    p{
                        font-size: 0.22rem;
                        color: #FA4040;
                    }
                }
                .cutPriceProcess{
                    padding-top: 0.2rem;
                    font-size: 0.22rem;
                    color: #888;
                    display: flex;
                    justify-content:space-between;
                }
            }
            .cutShopNum{
                border-top:1px dashed #ddd;
                font-size: 0.22rem;
                height: 0.62rem;
                display: flex;
                justify-content:space-between;
                align-items:center;
                padding: 0 0.05rem;
               .cutTypes{
                color: #66CC22;
               }
               .shopNumber{
                color: #999;
               }
            }
        }
    }
    .groupdetails{
        border-bottom:0.17rem solid #f0f0f3;
        border-top: 0.15rem solid #f0f0f3;
        .detailHeader{
            display: flex;
            padding: 0 0.3rem 0 0.2rem;
            height: 0.8rem;
            align-items:center;
            justify-content:space-between;
            .borderBFu(#ddd);
            h1{
                font-size: 0.26rem;
                color: #222;
            }
            .headerR{
                display: flex;
                align-items:center;
                span{
                    font-size: 0.24rem;
                    color: #999;
                    padding-right: 0.15rem;
                }
                label{
                    width: 0.2rem;
                    height: 0.2rem;
                    transform:rotate(45deg);
                    border: 0.02rem solid #414141;
                    border-width:0.02rem 0.02rem 0 0;
                }
            }
        }
        .detailF{
            padding: 0.4rem 0;
            img{
                width: 7.5rem;
                height: 0.68rem;
                display: block;
                margin:0 auto;
            }
        }
    }
    .swiperItem{
      height:7.5rem;
      width: 7.5rem;
      img{
        width: 100%;
      }
    }
    .index{
      width: 0.76rem;
      height: 0.36rem;
      border-radius: 0.23rem;
      font-size: 0.28rem;
      color: #fff;
      background: rgba(0,0,0,.4);
      margin: -0.7rem auto 0;
      padding-top: 0.03rem;
      box-sizing: border-box;
      position: relative;
      z-index: 466;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .cutLine{
        width: 7.5rem;
        position: relative;
        z-index: 222;
        height: 1.0rem;
        margin-top: 0.3rem;
        padding: 0 0.2rem;
        background: url(../../assets/image/cutPrice/cutpBg.jpg) no-repeat;
        background-size: 7.5rem 1.0rem;
        display: flex;
        justify-content:space-between;
        align-items:center;
        .cutLineLeft{
            color: #fff;
            display: flex;
            align-items:center;
            h1{
                font-size: 0.30rem;
                font-weight: bold;
                padding-right: 0.1rem;
                padding-top: 0.05rem;
            }
            span{
                font-size: 0.36rem;
                font-weight: bold;
            }
            label{
                font-size: 0.50rem;
                font-weight: bold;
            }
            .priceNum{
                height: 1rem;
                width: auto;
                margin-left: 0.15rem;
                h2{
                    font-size: 0.22rem;
                    height: 0.33rem;
                    display: flex;
                    align-items:center;
                    justify-content:center;
                    width: auto;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    background: url(../../assets/image/cutPrice/textBg.jpg) no-repeat;
                    background-size: 100% 0.33rem;
                    margin: 0.17rem 0 0.14rem;
                }
                p{
                    font-size: 0.22rem;
                    margin-top: -0.2rem;
                    padding-left: 0.15rem;
                    line-height: 0.5rem;
                    display: block;
                    text-align: left;
                }
            }
        }
        .cutLineRight{
            color: #fff;
            padding: 0.1rem 0;
            p{
                font-size: 0.22rem;
                height: 0.4rem;
                letter-spacing: 0.025rem;
            }
            .times{
                font-size: 0.24rem;
            }
        }
    }
    .cutLineNo{
        background: #BBB;
        background-size: 7.5rem 1.0rem;
        .cutLineLeft{
            .priceNum{
                h2{
                    background: #BBB;
                }
            }
        }
    }
    .shopName{
      position: relative;
      margin-top: 0.15rem;
      padding-bottom: 0.2rem;
      background: #fff;
      h1{
        font-size: 0.32rem;
        color: #232326;
        padding: 0.22rem 0 0.18rem 0;
      }
      p{
        font-size: 0.26rem;
        color:#EC2121;
        padding: 0 0.2rem;
      }
      .price{
        display: flex;
        padding: 0.2rem 0 0.1rem 0;
        justify-content:center;
        align-items:center;
        font-size: 0.26rem;
        color:#999;
        s{
          font-size: 0.26rem;
          color:#999;
          label{
            font-size: 0.32rem;
          }
        }
      }
    }
    .specifications{
      display: flex;
      justify-content:space-between;
      padding: 0 0.3rem 0 0.2rem;
      align-items:center;
      height: 1rem;
      .borderTFu(#ede9e9);
      p{
        font-size: 0.26rem;
        color: #222;
      }
      span{
        width: 0.2rem;
        height: 0.2rem;
        transform:rotate(45deg);
        border: 0.02rem solid #414141;
        border-width:0.02rem 0.02rem 0 0;

      }
    }
    .detailMess{
      p{
        font-size: 0.3rem;
        color: #646464;
        padding: 0.3rem 0 0.15rem 0;
      }
      .up{
        width: 0.6rem;
        display: block;
        margin: 0 auto 0.2rem;
        height: 0.6rem;

      }
    }
    .drowRule{
      border-bottom: 0.16rem solid #efeff4;
      padding:0 0.15rem;
    }
    .comments{
      border-bottom:0.18rem solid #f0f0f3;
      background: #fff;
      h1{
        height: 0.8rem;
        font-size: 0.26rem;
        line-height: 0.8rem;
        color: #222;
        text-align: left;
        padding-left: 0.2rem;
        .borderBFu(#e3e3e3);
      }
      .commentsItem{
        padding:0 0.2rem;
        .borderBFu(#e3e3e3);
        .comHead{
          display: flex;
          justify-content:space-between;
          height: 0.5rem;
          line-height: 0.5rem;
          .star{
            display: flex;
            span{
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.15rem 0.05rem;
              background: url(../../assets/image/carProduct/star.png) no-repeat;
              background-size: 0.2rem 0.2rem;
            }
          }
          .userName{
            font-size: 0.2rem;
          }
        }
        .comMain{
          padding:0.1rem 0;
          .conTitle{
            text-align: left;
            font-size: 0.3rem;
            color: #1a1a1b;
          }
          .comImg{
            font-size: 0;
            text-align: left;
            img{
              width: 1.75rem;
              height: 1.75rem;
              border-radius: 0.2rem;
              padding: 2% .1rem;
              box-sizing: border-box;
            }
          }
          .replayCom{
            width: 96%;
            padding: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.1rem auto;
            color: #999;
            background: #dddddd;
            font-size: 0.3rem;
            text-align: left;
            position: relative;
            span{
              border:0.2rem solid #ddd;
              border-width: 0.2rem 0.2rem 0 0;
              transform:rotate(45deg);
              position: absolute;
              top: -0.1rem;
              left: 0.4rem;
              background: #ddd;
            }
          }
        }
        .comFooter{
          padding: 0.1rem 0 0.2rem 0;
          p{
            font-size: 0.25rem;
            text-align: left;
          }
        }
      }
    }
    .allComments{
      width: 2.8rem;
      height: 0.6rem;
      line-height: 0.67rem;
      font-size: 0.26rem;
      .borderFu(#ababab,1.2rem);
      border-radius: 0.6rem;
      margin: 0.2rem auto 0.2rem;
      color: #666;
    }
    .noComment{
      padding: 0.2rem 0;
      background: #efeff4;
      img{
        width: 1.03rem;
        height: 1.33rem;
        display: block;
        margin: 0 auto 0.3rem;
      }
      p{
        font-size: 0.25rem;
        color: #999;
        padding: 0.05rem 0;
      }
    }
  }
  .allMainActive{
    padding-top: 1.74rem;
  }
  .footer{
    height: 1rem;
    display: flex;
    align-items:center;
    position: fixed!important;
    bottom: 0;
    width: 7.5rem;
    color: #fff;
    font-weight: 400;
    .borderTFu(#f8f8f8);
    background: #fff;
    z-index: 500;
    .type1,.type2,.type3{
        display: flex;
    }
    .toPay{
      height: 1rem;
      line-height: 1rem;
      width:2.5rem;
      font-size: 0.3rem;
      background: url(../../assets/image/carProduct/down.png) no-repeat;
      background-size: 2.5rem 1rem;
    }
    img{
      width: 0.44rem;
      height: 0.44rem;
      display:block;
      margin: 0.28rem auto;
    }
    .addShop{
      height: 1rem;
      line-height: 1rem;
      width: 2.47rem;
      font-size: 0.3rem;
      background: url(../../assets/image/carProduct/shopcar.png) no-repeat;
      background-size: 2.47rem 1rem;

    }
    .addShop,.toPay{
      color: #fff;
      width:2.47rem;
      h1{
        font-size:0.30rem;
        height: 1rem;
        line-height: 1rem;
      }
    }
    .cutPay{
      color: #fff;
      h1{
        font-size:0.26rem;
        height: 0.35rem;
        line-height: 0.35rem;
      }
      p{
        font-size: 0.26rem;
        margin: 0.15rem 0 0.05rem 0;
        height: 0.35rem;
        line-height: 0.35rem;
        span{
          font-size: 0.36rem;
        }
      }
    }
    .cutEnd{
      width:5rem;
      background: #BBBBBB;
    }
    a{
      width: 1.28rem;
      height: 1rem;
    }
    .shopCart{
      height: 1rem;
      .borderLFu(#f8f8f8);
      width: 17%;
      position: relative;
      span{
        font-size: 0.2rem;
        position: absolute;
        border-radius: 50%;
        top:0.1rem;
        right: 0.2rem;
        z-index: 99;
        color: #fff;
        display: flex;
        background: #ec2121;
        justify-content: center;
        align-items:center;
      }
    }
  }
  .popRule{
    background: #fff;
    .popHead{
      display: flex;
      align-items:flex-start;
      padding: 0.2rem;
      position: relative;
      .borderBFu(#ede9e9);
      .popHLeft{
        img{
          width: 2rem;
          display: block;
          height: 1.6rem;
        }
      }
      .popHCenter{
        width: 60%;
        text-align: left;
        padding-left: 0.2rem;
        h1{
          font-size: 0.35rem;
          height: 0.8rem;
          line-height: 0.8rem;
          color: #ec2121;
        }
        p{
          margin-top: 0.2rem;
          font-size: 0.25rem;
        }
      }
      .popHRight{
        position: absolute;
        top:-0.3rem;
        right: 0.2rem;
        img{
          width: 0.54rem;
          height: 0.54rem;
        }
      }
    }
    .popMain{
      .rule{
        .borderBFu(#ede9e9);
        padding:0 0 0.2rem 0;
        p{
          font-size: 0.25rem;
          text-align: left;
          padding: 0.1rem 0.2rem;
          color: #666666;
        }
        .ruleDetail{
          display: flex;
          padding: 0 0.2rem;
          flex-wrap:wrap;
          span{
            font-size: 0.22rem;
            padding: 0.1rem 0.15rem;
            margin:0.07rem 0.1rem;
            background: #f5f5f5;
            border-radius:0.15rem;
            color:#272727;
          }
          .activeSpan{
            background: #ec2121;
            color:#fff;
          }
        }
      }
      .number{
        padding: 0.2rem 0;
      }
    }
    .popFooter{
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #fff;
      background: #ec2121;
    }
  }
}
</style>
